<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 搜索 -->
      <div class="clearfix">
        <span class="text">说明:目前支持学科和关键字条件筛选</span>
        <el-button style="float: right; font-size:12px;" type="success" icon="el-icon-edit" @click="$router.push(`/questions/new`)">新增试题</el-button>
        <el-form style="margin-top:35px" label-position="right" label-width="80px" :model="formList">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select placeholder="请选择" v-model="formList.subjectID">
                  <el-option v-for="item in subjects" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试题类型">
                <el-select placeholder="请选择" v-model="formList.questionType">
                  <el-option v-for="item in questionType" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="题目备注">
                <el-input v-model="formList.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select placeholder="请选择" v-model="formList.catalogID">
                  <el-option v-for="item in twoLevelDirectory" :key="item.value" :value="item.value" :label="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="难度">
                <el-select placeholder="请选择" v-model="formList.difficulty">
                  <el-option v-for="item in difficulty" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="企业简称">
                <el-input v-model="formList.shortName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select placeholder="请选择" v-model="formList.tags">
                  <el-option v-for="item in tags" :key="item.value" :label="item.label" :value="item.label">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="方向">
                <el-select placeholder="请选择" v-model="formList.direction">
                  <el-option v-for="(item,index) in direction" :key="index" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-row :gutter="10">
                <el-form-item label="城市">
                  <el-col :span=12>
                    <el-select placeholder="请选择" v-model="formList.province">
                      <el-option v-for="(item,index) in province" :key="index" :value="item">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span=12>
                    <el-select placeholder="请选择" v-model="formList.city">
                      <el-option v-for="(item,index) in citys" :key="index" :value="item">
                      </el-option>
                    </el-select>
                  </el-col>

                </el-form-item>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input placeholder="根据题干搜索" v-model="formList.keyword"></el-input>
              </el-form-item>
              <el-form-item label="录入人">
                <el-select placeholder="请选择" v-model="formList.creatorID">
                  <el-option v-for="item in creatorID" :key="item.id" :label="item.username" :value="item.username">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="float:right">
                <el-button @click="handleClear">清除</el-button>
                <el-button type="primary" @click="search">搜索</el-button>
              </el-form-item>

            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 数据记录 -->
      <el-alert :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>

      <!-- 数据列表 -->
      <el-table style="margin-top:30px" :data="baseList">
        <el-table-column align="center" label="试题编号">
          <template v-slot={row}>
            <span>{{row.number}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="学科" width="80">
          <template v-slot={row}>
            <span>{{row.subject}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="目录" width="100">
          <template v-slot={row}>
            <span>{{row.catalog}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="题型" :formatter="formatType" width="80">
        </el-table-column>
        <el-table-column align="center" label="题干">
          <template v-slot={row}>
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="录入时间" :formatter="formatDate" width="180">
          <!-- <template v-slot={row}>
            <span>{{row.addDate}}</span>
          </template> -->
        </el-table-column>
        <el-table-column align="center" label="难度" :formatter="formatDifficulty" width="80">
          <!-- <template v-slot={row}>
            <span>{{row.difficulty}}</span>
          </template> -->
        </el-table-column>
        <el-table-column align="center" label="录入人">
          <template v-slot={row}>
            <span>{{row.creator}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="150" v-slot="{row}">
          <el-row :gutter="12">

            <el-col :span=6>

              <el-button size="mini" type="primary" plain icon="el-icon-view" circle title="预览" @click="handleLook(row)"></el-button>

            </el-col>
            <el-col :span=6>
              <el-button size="mini" type="success" plain icon="el-icon-edit" circle title="修改" @click="$router.push(`/questions/new?${row.id}`)"></el-button>
            </el-col>
            <el-col :span=6>
              <el-button size="mini" type="danger" plain icon="el-icon-delete" circle title="删除" @click="handleClear(row)"></el-button>
            </el-col>
            <el-col :span=6>
              <el-button size="mini" type="warning" plain icon="el-icon-check" circle title="加入精选" @click="addSelected(row)"></el-button>
            </el-col>
          </el-row>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <div class="pages">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Number(formList.page)" :total="Number(total)" :page-size="Number(formList.pagesize)" :page-sizes="[5,10,20,30]" layout="->,sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </div>
    </el-card>

    <!-- 预览标签的弹窗 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%" @close="handleClose">
      <div style="font-size:14px">
        <el-row :gutter="10">
          <el-col :span=6>
            <div style="margin-bottom:20px">【题型】: {{quest}}</div>
            <div>【学科】: {{datailQuestion.subjectName}}</div>
          </el-col>
          <el-col :span=6>
            <div style="margin-bottom:20px">【编号】: {{datailQuestion.id}}</div>
            <div>【目录】: {{datailQuestion.directoryName}}</div>
          </el-col>
          <el-col :span=6>
            <div style="margin-bottom:20px">【难度】: {{difficult}}</div>
            <div>【方向】: {{datailQuestion.direction}}</div>
          </el-col>
          <el-col :span=6>
            <div>【标签】: {{datailQuestion.tags}}</div>
          </el-col>
        </el-row>
      </div>
      <el-divider></el-divider>
      <div>【题干】:</div>
      <div v-html="datailQuestion.question"></div>
      <div>{{quest}} <span>(一下选中的选项为正确答案)</span></div>
      <el-radio-group v-model="isChoice" v-if="datailQuestion.questionType==1">
        <el-radio v-for="item in option" :key="item.id" :label="item.isRight" :disabled='item.isRight===isChoice? false:true' style="display: block;margin:5px 0">{{item.code}}</el-radio>
      </el-radio-group>
      <el-checkbox-group v-model="checkList" v-if="datailQuestion.questionType==2">
        <el-checkbox v-for="item in option" :key="item.id" :label="item.isRight" style="display: block;margin:5px 0">{{item.code}}</el-checkbox>
      </el-checkbox-group>
      <el-divider></el-divider>
      <div>【参考答案】:
        <span>
          <el-button type="danger" size="small" @click="show=true">视频答案预览</el-button>
        </span>
      </div>
      <div v-if="show"><video :src="datailQuestion.videoURL" controls="controls" style="width:400px;height:300px;margin-top:10px"></video></div>
      <el-divider></el-divider>
      <div>
        【答案解析】:<span v-html="datailQuestion.answer" style="display: inline-block;"></span>
      </div>
      <el-divider></el-divider>
      <div>
        【题目备注】:{{datailQuestion.remarks}}
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple as simpleAPI } from '@/api/hmmm/directorys'
import { simple as simple2 } from '@/api/base/users'
import { simple as simple1 } from '@/api/hmmm/subjects'
import { simple } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import moment from 'moment'
export default {
  data () {
    return {
      // 题目预览弹窗标志位
      dialogVisible: false,
      // 视频标志位
      show: false,
      // 基础题库列表
      baseList: [],
      // 表单数据
      formList: {
        page: 1, // 当前页数
        pagesize: 10, // 一页有几条
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null// 目录
      },
      // 提示文本
      alertText: '',
      // 数据总数
      total: 0,
      // 学科
      subjects: [],
      // 标签
      tags: [],
      // 省份
      province: [],
      // 城市
      citys: [],
      // 录入人
      creatorID: [],
      // 难度
      difficulty: difficulty,
      // 试题类型
      questionType: questionType,
      // 方向
      direction: direction,
      // 二级目录
      twoLevelDirectory: [],
      // 试题详情
      datailQuestion: [],
      // 答案选项
      option: [],
      // 答案标志位
      isChoice: 1,
      // 审核答案多选
      checkList: []

    }
  },
  created () {
    this.loadDataList()
    this.loadFormList()
  },
  watch: {
    // 监听
    'formList.subjectID': {
      async handler (val) {
        this.formList.catalogID = ''
        // 调用接口获取二级目录
        try {
          // console.log(this.formList.subjectID)
          const ret = await simpleAPI({
            subjectID: this.formList.subjectID
          })
          // console.log(ret)
          this.twoLevelDirectory = ret.data
        } catch {
          this.$message.error('获取列表失败')
        }
      },
      deep: true
    },
    'formList.province': {
      deep: true,
      async handler (val) {
        this.formList.city = ''
        try {
          const ret = await citys(this.formList.province)
          // console.log(ret)
          this.citys = ret
        } catch {
          this.$message.error('获取列表失败')
        }
      }
    }
  },
  computed: {
    // 格式化题型
    quest () {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(this.datailQuestion.questionType))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 格式化难度
    difficult () {
      const info = this.difficulty.find(item => parseInt(item.value) === parseInt(this.datailQuestion.difficulty))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    }
  },
  methods: {
    // 功能1：加载数据列表
    async loadDataList () {
      try {
        const ret = await list(this.formList)
        // console.log(ret)
        if (ret.status === 200) {
          // 加载成功
          this.baseList = ret.data.items
          this.total = ret.data.counts
          this.alertText = `数据一共${this.total}条`
        } else {
          this.$message.error('获取数据列表失败')
        }
      } catch {
        this.$message.error('获取数据列表失败')
      }
    },
    // 功能2：格式化题型
    formatType (row) {
      const info = this.questionType.find(item => parseInt(item.value) === parseInt(row.questionType))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 功能3：格式化难度
    formatDifficulty (row) {
      const info = this.difficulty.find(item => parseInt(item.value) === parseInt(row.difficulty))
      if (info) {
        return info.label
      } else {
        return '其他'
      }
    },
    // 功能4：格式化时间
    formatDate (date) {
      // console.log(date)
      if (!date.addDate) return ''
      return moment(date.addDate).format('YYYY-MM-DD hh:mm:ss')
    },
    // 功能5：调用接口获取下拉列表数据
    async loadFormList () {
      // 5-1:获取学科列表
      const ret = await simple1()
      // console.log(ret)
      // 5-2:获取标签列表
      const ret1 = await simple()
      // 5-3:获取城市列表
      const ret2 = await provinces()
      // console.log(ret2)
      // 5-4:获取录入人列表
      const ret3 = await simple2()
      // console.log(ret3)
      Promise.all([ret, ret1, ret2, ret3]).then(result => {
        // 学科
        this.subjects = result[0].data
        this.tags = result[1].data
        this.province = result[2]
        this.creatorID = result[3].data
      }).catch(() => {
        this.$message.error('获取列表失败')
      })
    },
    // 功能6：清除按钮 清空表单内容 重新加载列表
    handleClear () {
<<<<<<< HEAD
      this.formList.subjectID = null
      this.formList.difficulty = null
      this.formList.questionType = null
      this.formList.tags = null
      this.formList.city = null
      this.formList.keyword = null
      this.formList.remarks = null
      this.formList.shortName = null
      this.formList.direction = null
      this.formList.creatorID = null
      this.formList.catalogID = null
=======
      // this.formList.subjectID = ''
      // this.formList.difficulty = ''
      // this.formList.questionType = ''
      // this.formList.tags = ''
      // this.formList.city = ''
      // this.formList.keyword = ''
      // this.formList.remarks = ''
      // this.formList.shortName = ''
      // this.formList.direction = ''
      // this.formList.creatorID = ''
      // this.formList.catalogID = ''
      this.formList = {}
>>>>>>> 6cb985aef03ff72c8626d1c14f23fd5d0ec6c942
      this.loadDataList()
    },
    // 功能7：分页
    // 7-1 每页显示信息条数
    handleSizeChange (val) {
      this.formList.pagesize = val
      this.loadDataList()
    },
    // 7-2 进入某一页
    handleCurrentChange (val) {
      this.formList.page = val
      this.loadDataList()
    },
    // 功能8：关闭弹窗
    handleClose () {
      this.dialogVisible = false
    },
    // 功能9：预览
    async handleLook (row) {
      this.dialogVisible = true
      const ret = await detail(row)

      if (ret.status === 200) {
        this.datailQuestion = ret.data
        // 答案选项
        this.option = ret.data.options
        // 多选中找到所有正确答案的对象
        const info = this.option.find(item => item.isRight === ret.data.isChoice)
        // 把正确答案的选项放到数组里
        this.checkList.push(info.isRight)
      }
    },
    // 功能10：删除
    async handleDel (row) {
      try {
        const ret = await remove(row)
        // console.log(ret)
        if (ret.status === 200) {
          // 删除成功
          this.$message.success('删除试题成功')
          this.loadDataList()
        } else {
          this.$message.error('删除试题失败')
        }
      } catch {
        this.$message.error('删除试题失败')
      }
    },
    // 功能11.搜索(筛选)
    search () {
      this.loadDataList()
    },
    // 加入精选按钮
    async addSelected (row) {
      const ret = await this.$confirm('此操作将该题目加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (ret === 'cancel') return
      try {
        choiceAdd({ ...row, choiceState: 1 })
        this.loadDataList()
        this.$message.success('加入精选题库成功')
      } catch {
        this.$message.error('加入精选失败')
      }
    }

  }
}
</script>

<style scoped lang='less'>
.el-select {
  width: 100%;
}
.box-card {
  margin: 10px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.text {
  font-size: 12px;
  color: pink;
}
.item {
  font-size: 10px;
}
</style>
